import { Component, toNative } from 'vue-facing-decorator'
import Render from '@/render/Render'
import AccountInfo from './components/account-info/Index'
import type { CompanyProductInfoDto } from '@/api/company/types'
import { getCompanyProductInfo } from '@/api/company'
import { TabPane, Tabs } from 'ant-design-vue'
import BasicInfo from './components/basic-info/Index'
import TeamManagement from './components/team-management/Index'
import AccountDetails from './components/account-details/Index'

@Component
export class CustomerDetailView extends Render {
    companyId = 0

    activeName = 'teamManagement'

    companyProductInfo = {} as CompanyProductInfoDto

    async getCompanyBasicData() {
        const res = await getCompanyProductInfo({
            companyId: this.companyId
        })
        this.companyProductInfo = res
    }

    onTabChange() {}

    created() {
        if (this.$route.params?.id) {
            this.companyId = parseInt(this.$route.params.id as string)
            this.getCompanyBasicData()
        }
    }

    onMounted() {}

    render() {
        return (
            <div class="flex flex-col h-full">
                <AccountInfo
                    companyId={this.companyId}
                    companyProductInfo={this.companyProductInfo}
                    onRefresh={this.getCompanyBasicData}
                />
                <div class="bg-white px-20px pt-10px rounded-sm flex-1">
                    <Tabs v-model:value={this.activeName} onChange={this.onTabChange}>
                        <TabPane tab="基本信息" key="basicInfo">
                            <BasicInfo companyId={this.companyId}/>
                        </TabPane>
                        <TabPane tab="团队管理" key="teamManagement">
                            <TeamManagement companyId={this.companyId}/>
                        </TabPane>
                        <TabPane tab="账户信息" key="accountInfo">
                            <AccountDetails companyId={this.companyId}/>
                        </TabPane>
                    </Tabs>
                </div>
            </div>
        )
    }
}

export default toNative(CustomerDetailView)
